<template>
	<view class="change-password-container">
		<view class="section">

			<view class="input-group">
				<text>旧密码</text>
				<input v-model="oldPassword" type="password" placeholder="请输入旧密码" />
			</view>

			<view class="input-group">
				<text>新密码</text>
				<input v-model="newPassword" type="password" placeholder="请输入新密码" />
			</view>

			<view class="input-group">
				<text>确认新密码</text>
				<input v-model="confirmPassword" type="password" placeholder="请确认新密码" />
			</view>

			<view class="sub">
				<button class="submit-btn" @click="submitPasswordChange">提交</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		apiRevisePassword
	} from '../../api/apis';

	const oldPassword = ref('');
	const newPassword = ref('');
	const confirmPassword = ref('');
	const studentInfoForm = reactive({}); // Store student info (including userId and old password)

	// Load user info from local storage
	const loadUserInfo = () => {
		return new Promise((resolve, reject) => {
			uni.getStorage({
				key: 'studentInfo',
				success: (res) => {
					Object.assign(studentInfoForm, res.data);
					resolve(); // Resolve when data is loaded
				},
				fail: () => {
					reject('Failed to load user info');
				},
			});
		});
	};

	// Submit password change
	const submitPasswordChange = async () => {
		await loadUserInfo();

		if (!oldPassword.value || !newPassword.value || !confirmPassword.value) {
			uni.showToast({
				title: '请填写所有字段',
				icon: 'none',
			});
			return;
		}

		// Check if the old password matches the stored password
		if (oldPassword.value !== studentInfoForm.userPwd) {
			uni.showToast({
				title: '旧密码错误',
				icon: 'none',
			});
			return;
		}

		if (newPassword.value !== confirmPassword.value) {
			uni.showToast({
				title: '新密码和确认密码不匹配',
				icon: 'none',
			});
			return;
		}

		// Proceed to change the password
		const studentId = studentInfoForm.id;
		await changePassword(studentId, oldPassword.value, newPassword.value);
	};

	// Change password API call
	const changePassword = async (userid, oldPassword, newPassword) => {
		try {
			let res = await apiRevisePassword({
				userId: userid,
				password: newPassword
			});

			if (res.code === 0) {
				// On successful password change, navigate to login page
				uni.showToast({
					title: '密码修改成功',
					icon: 'success',
				});
				// Redirect to login page
				uni.clearStorage();
				uni.reLaunch({
					url: '/pages/login/login'
				});
			} else {
				uni.showToast({
					title: res.message || '修改密码失败',
					icon: 'none',
				});
				return {
					success: false,
					message: res.message || '修改密码失败'
				};
			}
		} catch (error) {
			console.error('修改密码请求失败:', error);
			uni.showToast({
				title: '网络错误，请稍后重试',
				icon: 'none',
			});
			return {
				success: false,
				message: '网络错误，请稍后重试'
			};
		}
	};
</script>

<style lang="scss">
	.change-password-container {
		box-sizing: border-box;
		padding: 30rpx;
		width: 100%;

		.section {
			background-color: #fff;
			border-radius: 8rpx;
			box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.1);
			padding: 30rpx;
		}

		.input-group {
			margin-bottom: 15rpx;

			text {
				font-size: 26rpx;
				color: #666;
				margin-bottom: 8rpx;
			}

			input {
				box-sizing: border-box;
				width: 100%;
				padding: 15rpx;
				height: 80rpx;
				font-size: 26rpx;
				border-radius: 4rpx;
				border: 1px solid #ddd;
				outline: none;
			}
		}

		.submit-btn {
			// background-color: #4CAF50;
			// color: #fff;
			// padding: 20rpx;
			// font-size: 32rpx;
			// border-radius: 5rpx;
			// width: 100%;
			// margin-top: 20rpx;

			background-color: #4CAF50;
			color: #fff;
			font-size: 30rpx;
			line-height: 80rpx;
			padding: 0 20rpx;
			border-radius: 5rpx;
			width: 100%;
			margin-top: 25rpx;
			transition: all 0.2s ease;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
			}
		}
	}
</style>